<template>
  <div>
    <table>
      <tr>
        <td>ID</td>
        <td>用户</td>
        <td>等级</td>
        <td>密码</td>
        <td>邮箱</td>
        <td>操作</td>
      </tr>
      <tr v-for="i in list0">
        <td>{{i.id}}</td>
        <td>{{i.username}}</td>
        <td v-for="j in list1" v-if="i.grade==j.id">{{j.name}}</td>
        <td>{{i.password}}</td>
        <td>{{i.email}}</td>
        <td><button @click="update_btn(i.id)">修改</button> <button @click="delete_btn(i.id)">删除</button></td>
      </tr>
    </table>
  </div>

</template>

<script>
    export default {
        name: "ShowUser",
        data(){
          return{
            list0:[],
            list1:[]
          }
        },
        methods:{
          update_btn(id){
            this.$router.push('/UpdateUser/'+id)
          },
          delete_btn(id){
            axios({
              url:'http://127.0.0.1:8000/app01/delete/'+id,
              method:'get',
            }).then(res=>{
              console.log(res)
              this.grade()
          })
          },
          show_grade(){
            axios({
              url:'http://127.0.0.1:8000/app01/user/',
              method:'get',
            }).then(res=>{
              console.log(res)
            this.list=res.data
          })
        }

        },
        created() {
            this.grade()
          axios({
              url:'http://127.0.0.1:8000/app01/grade/',
              method:'get',
            }).then(res=>{
              console.log(res)
            this.list1=res.data
          })
        }
    }
</script>

<style scoped>

</style>